// OverflowTabs 组件样式
.overflow-tabs-container {
    position: relative;

    .overflow-tabs-nav {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;

        .overflow-tabs-nav-prev,
        .overflow-tabs-nav-next {
            background: transparent;
            border: none;
            padding: 8px;
            cursor: pointer;
            color: #666;

            &:disabled {
                color: #d9d9d9;
                cursor: not-allowed;
            }
        }

        .overflow-tabs-nav-wrap {
            flex: 1;
            overflow: hidden;
            position: relative;

            .overflow-tabs-nav-list {
                display: flex;
                transition: transform 0.3s;
            }
        }

        .overflow-tabs-tab {
            display: inline-flex;
            flex-shrink: 0;
            padding: 12px 16px;
            margin-right: 4px;
            cursor: pointer;
            transition: all 0.3s;
            border-bottom: 2px solid transparent;

            &:hover {
                color: #1890ff;
            }

            &.overflow-tabs-tab-active {
                color: #1890ff;
                border-bottom-color: #1890ff;
            }

            &.overflow-tabs-tab-disabled {
                color: #d9d9d9;
                cursor: not-allowed;
            }
        }

        .overflow-tabs-more {
            position: relative;

            .overflow-tabs-more-btn {
                background: transparent;
                border: none;
                padding: 8px 12px;
                cursor: pointer;
                color: #666;
            }

            .overflow-tabs-more-dropdown {
                display: none;
                position: absolute;
                top: 100%;
                right: 0;
                background: white;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                border-radius: 4px;
                padding: 4px 0;
                z-index: 10;
                min-width: 120px;

                .overflow-tabs-more-item {
                    padding: 8px 12px;
                    cursor: pointer;

                    &:hover {
                        background-color: #f5f5f5;
                    }

                    &.overflow-tabs-more-item-active {
                        color: #1890ff;
                    }

                    &.overflow-tabs-more-item-disabled {
                        color: #d9d9d9;
                        cursor: not-allowed;
                    }
                }
            }

            &:hover {
                .overflow-tabs-more-dropdown {
                    display: block;
                }
            }
        }
    }

    .overflow-tabs-content {
        padding: 16px 0;
    }

    .overflow-tabs-debug {
        margin-top: 16px;
        padding: 12px;
        background-color: #f5f5f5;
        border-radius: 4px;
        font-size: 12px;
        color: #666;

        div {
            margin-bottom: 4px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}
